import { useModelInfo } from "../../store/useModelInfo";
import { Modal } from "../Modal/Modal";
import { SpinnerIcon } from "../icons/SpinnerIcon";
import { ErrorIcon } from "../icons/ErrorIcon";
import { ModelInfo } from "./ModelInfo";
import styles from "./ModelInfoModal.module.css";

export function ModelInfoModal() {
    const isOpen = useModelInfo((state) => state.isOpen);
    const toggle = useModelInfo((state) => state.toggle);
    const modelInfo = useModelInfo((state) => state.modelInfo);
    const isLoading = useModelInfo((state) => state.isLoading);
    const error = useModelInfo((state) => state.error);

    return (
        <Modal isOpen={isOpen} onClose={toggle} title="模型信息">
            {isLoading ? (
                <div className={styles.loadingContainer}>
                    <SpinnerIcon size={24} />
                    <span>加载模型详情...</span>
                </div>
            ) : modelInfo ? (
                <ModelInfo />
            ) : error ? (
                <div className={styles.error}>
                    <ErrorIcon size={20} />
                    <span>{error}</span>
                </div>
            ) : null}
        </Modal>
    );
}
